﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>test table_width</title>
    <style>
         body
         {
	        font-family: Verdana, Arial, Helvetica, sans-serif, "宋体";	
         }
         table
         {
         	table-layout:fixed;
         	border-collapse:collapse;
         }
         td
         {
         	width:100px;
         	border:solid 1px #ccc;
         }
         .outter
         {
         	width:300px;
         	height:100px;
         	overflow:auto;
         }
         .fl
         {
         	float:left;
         }
         .cf
         {
         	clear:both;
         }
        .overF
	    {
	    	overflow-x:scroll;
	    	overflow-y:scroll;
	    	border:solid 1px #f00;
	    	width:500px;
	    	height:300px;
	    }
	    .testL 
	    {
	    	width:100px;
	    	height:200px;
	    	border:solid 1px #ccc;
	    }
	    .testR
	    {
	    	width:800px;
	    	height:200px;
	    	border:solid 1px #444;
	    }
	    .testLoc1
	    {
	    	border:solid 4px Red;
	    	width:300px;
	    	height:200px;
	    	overflow:scroll;
	    }
	    .testLoc2
	    {
	        float:left;
	        border:solid 4px Gray;
	        float:left;
	    }
	    .testLoc2 table
	    {
	    	table-layout:fixed;
	    	width:1000px;
	    }
	    .testLoc3 
	    {
	    	border:solid 4px Green;
	    }
	    .testLoc3 table
	    {
	    	table-layout:fixed;
	    }
	    .testtd
	    {
	    	width:100px;
	    	display:block;
	    }
    </style>

    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

    <script type="text/javascript" language="javascript">
    </script>

</head>
<body>
    <div >测试float + width</div>
    <div class="testGrid overF">
        <div style="float:left" class="testL">123</div>
        <div style="float:left" class="testR">1234</div>
        <div class="cf"></div>
    </div>

<div class="outter">
    <div class="fl">left</div>
    <div class="fl">
        <div >123</div>
        <table>
            <tr><td>123</td><td>123</td><td>111123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
            <tr><td>123</td><td>123</td><td>111123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
            <tr><td>123</td><td>123</td><td>111123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
            <tr><td>123</td><td>123</td><td>111123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
            <tr><td>123</td><td>123</td><td>111123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
            <tr><td>123</td><td>123</td><td>111123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
        </table>
    </div>
    <div class="cf"></div>
    </div>
    
    <div class="testLoc1" >
        <div class="testLoc2" >
            <table><tr><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td></tr></table>
            <div class="testLoc3" >
            </div>
        </div>
    </div>
    <h3>compare</h3>    
    <div class="testLoc3" >
        <table><tr><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td><td class="testtd">123</td></tr></table>
    </div>

</body>
</html>
